<template>
    <el-main class="groupHome">

        <el-row :gutter="20">
            <el-col :span="16">
                <div class="activityBox">
                    <div class="title">
                        <label>教研组活动</label>
                        <i class="el-icon-more more" @click="$router.push({path:'/research/researchGroup/researchGroupActivity'})"></i>
                    </div>

                    <div class="activityList">
                        <div class="activity" v-for="(item, index) in activityPageList100.list" :key="index"
                        @click="toResearchReadDetails(item,3,'researchGroupActivity')">
                            <div class="activityCover">
                                <el-image :src="item.cover | pictureUrl"></el-image>
                            </div>
                            <div class="activityDetail">
                                <div class="activityName" @click="$router.push({path:'/research/researchGroup/researchReadDetails',query:{junmpType: 2}})">
                                    <span>【{{item.dictype == 101?"课例研讨":"主题研讨"}}】{{item.title}}</span>
                                </div>
                                <div class="subtitle">
                                    <span>{{item.state}}</span>
                                </div>
                                <div class="activityTime">
                                    <span>活动时间：{{item.starTime.slice(0,16)+'--'+item.endTime.slice(0,16)}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="empty" v-if="activityPageList100.total == 0">
                        <i class="iconfont icon-icon"></i>
                        <label>暂无数据</label>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="activeUser">
                    <div class="title">
                        <label>活跃用户</label>
                    </div>

                    <ul class="hotWarp">
                        <li class="hotList" v-for="(item, index) in researchUserStatisP.list" :key="index">
                            <div class="user">
                                <span>{{index+1}}</span>
                                <label>{{item.username}}</label>
                            </div>
                            <div class="count">
                                <label>{{item.count}}次</label>
                            </div>
                        </li>
                    </ul>
                    <div class="empty3" v-if="researchUserStatisP.total == 0">
                        <i class="iconfont icon-icon"></i>
                        <label>暂无数据</label>
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-row class="elRow" :gutter="20">
            <el-col :span="24">
                <div class="albumWarp">
                    <div class="title">
                        <label>教研组相册</label>
                        <i class="el-icon-more more" @click="$router.push({path:'/research/researchGroup/researchGroupAlbum'})"></i>
                    </div>
                    <div class="album">
                        <swiper :options="swiperOptionMultiple" v-if="researchAlbumlist.list" ref="mySwiper">
                            <swiper-slide v-for="(item, index) in researchAlbumlist.list" :key="index">
                                <div class="campusList" @click="openDetails(item)">
                                    <img :src="item.cover | pictureUrl" :title="item.photoname" style="width: 100%;height:250px" />
                                    <p>{{item.photoname}}</p>
                                </div>
                            </swiper-slide>
                            <div class="swiper-button-prev" slot="button-prev"></div>
                            <div class="swiper-button-next" slot="button-next"></div>
                        </swiper>
                    </div>
                    <div class="empty1" v-if="researchAlbumlist.total == 0">
                        <i class="iconfont icon-icon"></i>
                        <label>暂无数据</label>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row class="elRow" :gutter="20">
            <el-col :span="16">
                <div class="centerBox">
                    <div class="title">
                        <label>教研组成果</label>
                        <i class="el-icon-more more" @click="$router.push({path:'/research/researchGroup/researchGroupIevements'})"></i>
                    </div>
                    <ul class="colListWarp">
                        <li class="listBox" v-for="(item, index) in researchGainlist.list" :key="index"
                        @click="toResearchReadDetails(item,2,'researchGroupIevements')">
                            <div class="fruitTitle">
                                <i class="diamond"></i>
                                <label>{{item.title}}</label>
                            </div>
                            <div class="time">
                                <label>{{item.creationtime}}</label>
                            </div>
                        </li>
                    </ul>
                    <div class="empty" v-if="researchGainlist.total == 0">
                        <i class="iconfont icon-icon"></i>
                        <label>暂无数据</label>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="centerBox">
                    <div class="title">
                        <label>访客统计</label>
                    </div>
                    <div class="visit">
                        <label>今日访问：</label>
                        <label>{{todayTotals}}</label>
                    </div>
                    <div class="visit">
                        <label>总访问量：</label>
                        <label>{{visitorTotals}}</label>
                    </div>
                </div>
            </el-col>
        </el-row>
    </el-main>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        computed:{
            ...mapState({
                userInfo: state => state.userModule.userInfo,
                otherUserInfo: state => state.userModule.otherUserInfo,
                group: state =>state.researchModule.group
            })
        },
        created(){
            this.groupPage()
            this.researchGain()
            this.researchStatis()
            this.getVistorTotal('today')
            this.getVistorTotal('total')
            this.researchUserStatis()
            this.activityPage(0)
            this.researchAlbum()
        },
        data() {
            return {
                src: require('../../../assets/img/headportrait03.jpg'),
                swiperOptionMultiple:{
                    loop : false,
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    slidesPerView: 4,
                    spaceBetween: 10,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    on: {
                        tap:function (e) {
                        }
                    }
                },
                imgArr:[{
                    id:1,
                    imgUrl:require('../../../assets/img/calligraphy01.jpg'),
                    detail:"吉首市第二届书法大赛"
                },{
                    id:2,
                    imgUrl:require('../../../assets/img/calligraphy02.jpg'),
                    detail:"吉首市第二届书法大赛"
                },{
                    id:3,
                    imgUrl:require('../../../assets/img/calligraphy03.jpg'),
                    detail:"吉首市第二届书法大赛"
                },{
                    id:4,
                    imgUrl:require('../../../assets/img/calligraphy04.jpg'),
                    detail:"吉首市第二届书法大赛"
                },{
                    id:5,
                    imgUrl:require('../../../assets/img/calligraphy05.jpg'),
                    detail:"吉首市第二届书法大赛"
                }],
                groupPagelist: {},
                researchGainlist: {},
                researchAlbumlist: {},
                researchStatisP:{},
                todayTotals: {},
                visitorTotals:{},
                researchUserStatisP:{},
                activityPageList100:{},
                activityPageList101:{}
            }
        },
        methods:{
            openDetails(params){    
                this.$router.push({path:'/research/researchGroup/researchGroupAlbum',query:{
                    album: params
                }})
            },
            toResearchReadDetails(params,type,routePath){
                console.log(this.userInfo,this.otherUserInfo)
                if (this.userInfo.id && this.otherUserInfo.userid && 
                this.userInfo.id != this.otherUserInfo.userid) {
                    this.$store.dispatch('visitorAllModule/visitorAdd', {
                        fromuserid: this.otherUserInfo.userid,
                        visitorid:  params.id,
                        type: type == 3?6:2
                    })
                }
                this.$router.push({path:'/research/researchGroup/researchReadDetails',query:{
                    routePath: routePath,
                    article: params,
                    junmpType: type}})
            },
            activityPage(params){
                this.$store.dispatch('researchModule/activityPage', {
                    dictype: params,
                    groupId: this.group.id,
                    organizationId: this.otherUserInfo.xxdm,
                    limit: 2,
                    page: 1,
                }).then(res =>{
                    if(res){
                        this.activityPageList100 =res
                        if(params ==100){
                            this.activityPageList100 =res 
                        }else{
                            this.activityPageList101 =res
                        }
                    }
                })
            },
            researchUserStatis(){
                this.$store.dispatch('researchModule/researchUserStatis', {
                    id: this.group.id,
                    limit: 10,
                    page: 1,
                    type: 1
                }).then(res =>{
                    if(res){
                        this.researchUserStatisP = res
                    }
                })
            },
            // 获取访问数量
            getVistorTotal(params){
                if(params =='today'){
                    this.$store.dispatch('visitorAllModule/visitorPageToday',{
                        userId: this.group.id
                    }).then(res =>{
                        if(res.data.code ==200){
                            this.todayTotals = res.data.result.total
                        }
                    })
                }else{  
                    this.$store.dispatch('visitorAllModule/visitorPageTotal',{
                        userId: this.group.id
                    }).then(res =>{
                        if(res.data.code ==200){
                            this.visitorTotals = res.data.result.total
                        }
                    })
                }
            },
            researchStatis(params){
                this.$store.dispatch('researchModule/researchStatis', {
                    id: this.group.id,
                    isGroup: true,
                }).then(res =>{
                    if(res){
                        this.researchStatisP = res
                    }
                })
            },
            researchGain(){
                this.$store.dispatch('articleModule/schoolArticleList',{
                    schoolid: this.otherUserInfo.xxdm,
                    // classifyid: this.group.id,
                    groupId:this.group.id,
                    dictype: '98',
                    draft: 1,
                    limit: 10,
                    page: 1,
                    search: null,
                    sortType: 0,
                    userid: null,
                    yearandmonth: null
                }).then(res =>{
                    if(res.data.code == 200){
                        this.researchGainlist = res.data.result
                    }
                })
            },
            researchAlbum(){
                this.$store.dispatch('photoalbumModule/albumPageSchool', {
                    // classifyid: this.group.id,
                    groupId:this.group.id,
                    sort: 0,
                    dictype: '96',
                    userid: this.otherUserInfo.xxdm,
                    search: null,
                    limit: this.pageSize,
                    page: this.currentPage,
                }).then(res => {
                    if (res.data.code === 200) {
                        this.researchAlbumlist = res.data.result
                    }
                })
            },
            groupPage(){
                this.$store.dispatch('researchModule/groupPage', {
                    organizationId: this.otherUserInfo.xxdm,
                    limit: 20,
                    page: 1,
                }).then(res =>{
                    if(res){
                        this.groupPagelist = res
                    }
                })
            }
            // search(){

            // },
            
        }
    }
    
</script>

<style lang="scss" scoped>
    .empty {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: 100px 200px;;
        width: 200px;
        height: 135px;

        i {
            font-size: 48px;
        }

        label {
            font-size: 32px;
            display: block;
            width: 200px;
            margin: 0 auto;
        }
    }
    .empty1 {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: 100px 200px;
        // width: 200px;
        // height: 135px;

        i {
            font-size: 48px;
        }

        label {
            font-size: 32px;
            display: block;
            width: 200px;
            margin: 0 auto;
        }
    }
    .empty3 {
        position: absolute;
        top: 0;
        bottom: 0;
        right: -135px !important;
        margin: 100px 200px;
        width: 200px;
        height: 135px;

        i {
            font-size: 48px;
        }

        label {
            font-size: 32px;
            display: block;
            width: 200px;
            margin: 0 auto;
        }
    }
    .groupHome {
        width: 81%;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
        overflow: hidden;

        .title {
            font-size: 14px;
            color: #303133;
            text-align: left;
            box-sizing: border-box;
            padding-bottom: 8px;
            border-bottom: 2px solid #409EFF;
            position: relative;

            .more {
                position: absolute;
                top: 0px;
                right: 0px;
                font-size: 22px;
                color: #303133;
                cursor: pointer;
            }

            .more:hover {
                color: #409EFF;
            }
        }

        .activityBox {
            background-color: white;
            box-sizing: border-box;
            padding: 10px;
            width: 100%;
            height: 420px;

            .activityList {
                box-sizing: border-box;
                padding: 0 10px;

                .activity {
                    margin-top: 15px;
                    height: 160px;

                    .activityCover {
                        float: left;
                        width: 160px;
                        height: 160px;
                        cursor: pointer;
                    }

                    .activityDetail {
                        float: left;
                        width: calc(100% - 170px);
                        height: 100%;
                        margin-left: 10px;
                        text-align: left;

                        .activityName {
                            font-size: 15px;
                            color: #303133;
                            cursor: pointer;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .subtitle,
                        .activityTime {
                            font-size: 14px;
                            color: #909399;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .subtitle {
                            margin: 15px 0;
                        }
                    }
                }
            }
        }

        .activeUser {
            background-color: white;
            box-sizing: border-box;
            padding: 10px;
            width: 100%;
            height: 420px;

            .hotWarp {
                margin-top: 10px;

                .hotList {
                    height: 40px;
                    line-height: 40px;

                    .user {
                        float: left;
                        color: #303133;
                        font-size: 14px;

                        span {
                            display: inline-block;
                            width: 20px;
                            height: 20px;
                            line-height: 20px;
                            color: white;
                            background-color: #909399;
                            margin-right: 6px;
                        }

                        label {
                            // cursor: pointer;
                        }
                    }

                    .count {
                        float: right;
                        color: #409EFF;
                        font-size: 14px;
                    }
                }

                .hotList:nth-child(1) .user>span,
                .hotList:nth-child(2) .user>span,
                .hotList:nth-child(3) .user>span {
                    background-color: #409EFF;
                }
            }
        }

        .elRow {
            margin: 20px 0;

            .centerBox {
                widows: 100%;
                min-height: 600px;
                background-color: white;
                box-sizing: border-box;
                padding: 10px;

                .colListWarp {
                    box-sizing: border-box;
                    padding: 0 10px;

                    .listBox {
                        height: 40px;
                        line-height: 40px;
                        font-size: 14px;

                        .fruitTitle {
                            height: 100%;
                            float: left;
                            color: #303133;
                            max-width: 70%;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            cursor: pointer;

                            i {
                                display: inline-block;
                                width: 8px;
                                height: 8px;
                                background-color: #409EFF;
                                transform: rotate(-46deg);
                                margin: 0 5px;
                            }

                            label {
                                cursor: pointer;
                            }

                            label:hover {
                                color: #409EFF;
                            }
                        }

                        .time {
                            float: right;
                            color: #909399;
                        }
                    }
                }
            }
        }

        .albumWarp{
            width: 100%;
            background-color: white;
            box-sizing: border-box;
            padding: 10px;
            min-height: 400px;
            .album{
                margin-top: 20px;
                .campusList{
                    width: auto;
                    text-align: center;
                    font-size: 14px;
                    color: #303133;
                    p{
                        margin-block-start: 0;
                        margin-block-end: 0;
                    }
                }
            }

            .visit{
                width: 100%;
                height: 20px;
                font-size: 14px;
                color: #303133;
                margin-top: 15px;
                label:first-of-type{
                    float: left;
                }

                label:last-of-type{
                    float: right;
                }

            }
        }

        ul {
            list-style-type: none;
            margin-block-start: 0;
            margin-block-end: 0;
            padding-inline-start: 0;
        }
    }
</style>